﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .login-container {
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, #1976d2, #64b5f6);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login-box {
        width: 400px;
        padding: 40px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .login-title {
        text-align: center;
        margin-bottom: 30px;
        color: #333;
        font-size: 24px;
        font-weight: 500;
    }
    .login-form {
        margin-top: 20px;
    }
    .layui-form-item {
        margin-bottom: 25px;
    }
    .login-btn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }
    .login-footer {
        margin-top: 20px;
        text-align: center;
        color: #999;
        font-size: 13px;
    }
    .layui-input {
        height: 44px;
        line-height: 44px;
        padding-left: 38px;
    }
    .input-prefix-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }
    .error-message {
        color: #f44336;
        font-size: 13px;
        margin-top: 5px;
        display: none;
    }
</style>
<body>
    <div class="login-container">
        <div class="login-box">
            <h2 class="login-title">ERP系统登录</h2>
            <form class="layui-form login-form" lay-filter="loginForm">
                @Html.AntiForgeryToken()
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <i class="layui-icon layui-icon-username input-prefix-icon"></i>
                        <input type="text" name="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="error-message" id="userNameError"></div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <i class="layui-icon layui-icon-password input-prefix-icon"></i>
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="error-message" id="passwordError"></div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <button class="layui-btn layui-btn-normal login-btn" lay-submit lay-filter="loginForm">登录</button>
                    </div>
                </div>
            </form>
            <div class="login-footer">
                Copyright © 2024 ERP System All Rights Reserved
            </div>
        </div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 页面加载时，尝试从localStorage获取并填充用户名
        var savedUsername = localStorage.getItem('erp_username');
        if (savedUsername) {
            form.val('loginForm', {
                'userName': savedUsername
            });
        }
        
        // 监听登录表单提交
        form.on('submit(loginForm)', function(data){
            // 清除错误提示
            $('.error-message').hide();
            
            // 显示加载层
            var loadIndex = layer.load(1, {
                shade: [0.3, '#fff']
            });
            
            // 获取防伪标记
            var token = $('input[name="__RequestVerificationToken"]').val();
            
            $.ajax({
                url: '/User/Login',
                type: 'POST',
                data: {
                    userName: data.field.userName,
                    password: data.field.password,
                    __RequestVerificationToken: token
                },
                success: function(res) {
                    layer.close(loadIndex);
                    
                    if(res.success) {
                        // 登录成功，将用户名保存到localStorage
                        localStorage.setItem('erp_username', data.field.userName);

                        layer.msg('登录成功', {
                            icon: 1,
                            time: 1500
                        }, function(){
                            window.location.href = '/Menu/Menus';
                        });
                    } else {
                        // 显示具体错误信息
                        if(res.message.includes('用户名')) {
                            $('#userNameError').text(res.message).show();
                        } else if(res.message.includes('密码')) {
                            $('#passwordError').text(res.message).show();
                        } else {
                            layer.msg(res.message, {
                                icon: 2
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    layer.close(loadIndex);
                    console.error('登录请求失败:', error);
                    layer.msg('登录请求失败，请稍后重试', {
                        icon: 2
                    });
                }
            });
            
            return false; // 阻止表单默认提交
        });
        
        // 输入框获得焦点时隐藏错误提示
        $('input[name="userName"]').focus(function() {
            $('#userNameError').hide();
        });
        
        $('input[name="password"]').focus(function() {
            $('#passwordError').hide();
        });
    });
</script>